<template>
	<div>
		<el-form ref="queryFrom" :inline="true" :model="queryForm" class="demo-form-inline" size="small">
			<el-form-item label="赠品型号">
				<el-input v-model="queryForm.goods.gmodel" placeholder="请输入赠品型号" style="width: 140px"></el-input>
			</el-form-item>
			<el-form-item label="赠品名称">
				<el-input v-model="queryForm.goods.gname" placeholder="请输入赠品名称" style="width: 140px"></el-input>
			</el-form-item>
			<el-form-item label="品牌" :label-width="'60px'">
				<el-select v-model="queryForm.goods.gbrand" placeholder="请选择品牌" style="width: 150px">
					<el-option v-for="item in brandList" :key="item.id + ''" :label="item.brandName"
						:value="item.brandName">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="赠品颜色" :label-width="'70px'">
				<el-select v-model="queryForm.goods.gcolor" placeholder="请选择" clearable>
					<el-option v-for="dict in colorList" :key="dict.dicDataVal" :label="dict.dicDataLabel"
						:value="dict.dicDataVal" />
				</el-select>
			</el-form-item>
			<el-form-item  label="赠品类型" :label-width="'70px'">
				<treeselect v-model="queryForm.goods.gtype" placeholder="赠品类型" style="width:190px;" clearable
					:options="goodsTypeTree" :normalizer="normalizer" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="doQuery()" icon="el-icon-search" size="mini">搜索</el-button>
				<el-button type="primary" plain icon="el-icon-refresh" @click="resetForm()" size="mini">重置</el-button>
			</el-form-item>
		</el-form>
		<el-button @click="addGift()" type="primary" plain icon="el-icon-plus" size="mini">新增</el-button>
		<!-- 展示数据 -->
		<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="goods.gname" label="赠品名称" width="340px">
			</el-table-column>
			<el-table-column prop="goods.gbrand" label="品牌">
			</el-table-column>
			<el-table-column prop="goods.gmodel" label="型号">
			</el-table-column>
			<el-table-column prop="giftStock" label="库存量"></el-table-column>
			<el-table-column prop="goods.marketPrice" label="赠品单价"></el-table-column>
			<el-table-column prop="goods.purchasePrice" label="采购成本"></el-table-column>
			<el-table-column label="操作" align="center" min-width="100">
				<template slot-scope="scope">
					<el-button plain small @click="checkDetail(scope.row)" size="mini">查看</el-button>
					<el-button plain mini @click="modifyGift(scope.row)" size="mini">修改</el-button>
					<el-button type="danger" plain mini @click="deleteGift(scope.row)" size="mini">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryForm.pageNum" :page-sizes="[5, 10, 15]" :page-size="queryForm.pageSize"
			layout="->, total, sizes, prev, pager, next, jumper" :total="totalNum">
		</el-pagination>
		<!-- 详情弹框 -->

		<!-- 添加弹框 -->
		<el-dialog :title="dialogTitle" :visible.sync="adddialogFormVisible">
			<el-form :model="form" size="small">
				<el-form-item :label-width="formLabelWidth">
					<el-button type="primary" size="mini" @click="showSelectGoods2Dialog" plain>选择二类商品</el-button>
				</el-form-item>
				<el-form-item label="赠品名称" :label-width="formLabelWidth">
					<el-input v-model="form.goods.gname" autocomplete="off" style="width: 200px" disabled></el-input>
				</el-form-item>
				<el-form-item label="赠品品牌" :label-width="formLabelWidth">
					<el-input v-model="form.goods.gbrand" autocomplete="off" style="width: 200px" disabled></el-input>
				</el-form-item>
				<el-form-item label="赠品类型" :label-width="formLabelWidth">
					<treeselect v-model="form.goods.gtype" placeholder="赠品类型" style="width:190px;" clearable
						:options="goodsTypeTree" :normalizer="normalizer" disabled />
				</el-form-item>
				<el-form-item label="赠品型号" :label-width="formLabelWidth">
					<el-input v-model="form.goods.gmodel" autocomplete="off" style="width: 200px" disabled></el-input>
				</el-form-item>
				<el-form-item label="赠品颜色" :label-width="formLabelWidth">
					<el-select v-model="form.goods.gcolor" placeholder="请选择" disabled>
						<el-option v-for="dict in colorList" :key="dict.dicDataVal" :label="dict.dicDataLabel"
							:value="dict.dicDataVal" />
					</el-select>
				</el-form-item>
				<el-form-item label="赠品市场价" :label-width="formLabelWidth">
					<el-input v-model="form.goods.marketPrice" autocomplete="off" style="width: 200px" disabled>
					</el-input>
				</el-form-item>
				<el-form-item label="采购成本" :label-width="formLabelWidth">
					<el-input v-model="form.goods.purchasePrice" autocomplete="off" style="width: 200px" disabled>
					</el-input>
				</el-form-item>
				<el-form-item label="库存量" :label-width="formLabelWidth">
					<el-input v-model="form.giftStock" autocomplete="off" style="width: 200px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addGiftSubmit()" v-show="dialogTitle!='查看详情'">提交</el-button>
				<el-button @click="closeAdd()">关闭</el-button>
			</div>
		</el-dialog>

		<!--选择二类商品-->
		<el-dialog :visible.sync="selectGoods2Visible1" width="980px">
			<el-form :model="queryGoods2Form" size="small" ref="queryGoods2Form" :inline="true"
				class="demo-form-inline">
				<el-form-item label="编码:" prop="gcode">
					<el-input v-model="queryGoods2Form.gcode" style="width:100px"></el-input>
				</el-form-item>
				<el-form-item label="名称:" prop="gcode">
					<el-input v-model="queryGoods2Form.gname" style="width:100px"></el-input>
				</el-form-item>
				<el-form-item label="型号:" prop="gmodel">
					<el-input v-model="queryGoods2Form.gmodel" style="width:100px"></el-input>
				</el-form-item>
				<el-form-item label="颜色" prop="gcolor">
					<el-select v-model="queryGoods2Form.gcolor" placeholder="请选择" clearable style="width:100px">
						<el-option v-for="dict in colorList" :key="dict.dicDataVal" :label="dict.dicDataLabel"
							:value="dict.dicDataVal" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="listGoods2()" size="mini" icon="el-icon-search" plain>搜索
					</el-button>
					<el-button icon="el-icon-refresh" @click="resetQueryGoods2Form()" size="mini" plain>重置
					</el-button>
				</el-form-item>
				<div>
					<el-table ref="goods2TableData" :data="goods2TableData" tooltip-effect="dark">
						<el-table-column prop="gcode" label="编码"></el-table-column>
						<el-table-column prop="gname" label="名称"></el-table-column>
						<el-table-column prop="gbrand" label="品牌"></el-table-column>
						<el-table-column prop="gmodel" label="型号"></el-table-column>
						<el-table-column prop="goodsType.typeName" label="类型"></el-table-column>
						<el-table-column prop="gcolor" label="颜色"><template slot-scope="scope">
								<div v-for="dict in colorList" :key="dict.dicDataVal" :label="dict.dicDataLabel"
									:value="dict.dicDataVal">
									<div v-if="scope.row.gcolor == dict.dicDataVal">
										{{dict.dicDataLabel}}
										</v-if>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="operate" label="操作">
							<template slot-scope="scope">
								<el-button type="success" icon="el-icon-circle-check"
									@click="setGoods2(scope.$index, scope.row)" size="mini" plain>选择
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
						:current-page="queryGoods2Form.pageNum" :page-sizes="[3, 5, 8,10]"
						:page-size="queryGoods2Form.pageSize" layout="->, total, sizes, prev, pager, next, jumper"
						:total="queryGoods2Form.totalNum">
					</el-pagination>
				</div>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getDistinctBrand
	} from '@/api/gg/brand.js';
	import {
		getGoodsTypeTree
	} from '@/api/gg/goodsType.js';

	import Treeselect from '@riophae/vue-treeselect'
	import '@riophae/vue-treeselect/dist/vue-treeselect.css'

	export default {
		components: {
			Treeselect
		},
		data() {
			return {
				goods2TableData: [],
				queryGoods2Form: {
					gtype: null,
					gname: "",
					gbrand: "",
					gmodel: "",
					gcolor: "",
					pageNum: 1,
					pageSize: 10,
					totalNum: 0
				},
				selectGoods2Visible1: false,
				totalNum: 0,
				queryForm: {
					goods: {
						gtype: null,
						gname: null,
						gbrand: null,
						gmodel: null,
						gcolor: null,
					},
					pageNum: 1,
					pageSize: 10
				},
				tableData: [],
				twolevelList: [],
				brandList: [],
				colorList: [],
				dialogFormVisible: false,
				form: {
					id:null,
					goodsId: null,
					goods: {
						gtype: null,
						gname: "",
						gbrand: "",
						gmodel: "",
						gcolor: "",
					},
					giftStock: 0
				},
				formLabelWidth: "120px",
				adddialogFormVisible: false,
				dialogTitle:"",
				updateform: {},
				goodsTypeTree: [],
				normalizer(node) {
					return {
						id: node.id,
						label: node.typeName,
						children: node.children,
					}
				},
			};
		},
		methods: {
			addGiftSubmit() {
				if(this.form.id!=null&&this.form.id!=''){
					axios.put("/gift",this.form).then(resp=>{
						if (resp.code == 20000) {
							this.$message.success(resp.msg);
							this.adddialogFormVisible = false;
							this.doQuery();
						} else {
							this.$message.error(resp.msg);
						}
					})
				}else{
					axios.post("/gift", this.form).then((response) => {
						if (response.code == 20000) {
							this.$message.success(response.msg);
							this.adddialogFormVisible = false;
							this.doQuery();
						} else {
							this.$message.error(response.msg);
						}
					});
				}
			},
			getAllBrands() {
				this.$axios.get("/toproduct/getAllBrands").then((response) => {
					this.brandList = response.data;
				});
			},
			modifyGift(row) {
				this.adddialogFormVisible = true;
				this.dialogTitle="修改赠品";
				this.resetAddForm();
				this.form=JSON.parse(JSON.stringify(row));
			},
			handleSizeChange(val) {
				this.queryForm.pageSize = val;
				this.doQuery();
			},
			handleCurrentChange(val) {
				this.queryForm.pageNum = val;
				this.doQuery();
			},
			doQuery() {
				axios.get("/gift?" + this.qs_stringify(this.queryForm))
					.then(resp => {
						this.tableData = resp.list;
						this.queryForm.pageNum = resp.pageNum;
						this.queryForm.pageSize = resp.pageSize;
						this.totalNum = resp.total;
					});
			},
			checkDetail(row) {
				this.resetAddForm();
				this.form=JSON.parse(JSON.stringify(row));
				this.adddialogFormVisible = true;
				this.dialogTitle="查看详情";
			},
			deleteGift(row) {
				this.$confirm("确定要删除选中的赠品吗?", "提示").then(() => {
					this.$axios.delete("/gift?id=" + row.id).then((response) => {
						this.$message.success(response.msg);
						this.doQuery();
					});
				});
			},
			resetForm() {
				this.$refs.queryFrom.resetFields();
				this.queryForm = {
					goods: {
						gtype: null,
						gname: null,
						gbrand: null,
						gmodel: null,
						gcolor: null,
					},
					pageNum: 1,
					pageSize: 10
				};
				this.doQuery();
			},
			addGift() {
				this.adddialogFormVisible = true;
				this.dialogTitle="添加赠品";
				this.resetAddForm();
			},
			closeAdd() {
				this.adddialogFormVisible = false;
				this.resetAddForm();
			},
			resetAddForm(){
				this.form = {
					id:null,
					goodsId: null,
					goods: {
						gtype: null,
						gname: null,
						gbrand: null,
						gmodel: null,
						gcolor: null,
					},
					giftStock: 0
				};
			},
			handleSizeChange2(val) {
				this.queryGoods2Form.pageSize = val;
				this.listGoods2();
			},
			handleCurrentChange2(val) {
				this.queryGoods2Form.pageNum = val;
				this.listGoods2();
			},
			setGoods2(i, row) {
				this.form.goodsId = row.id;
				this.form.goods = JSON.parse(JSON.stringify(row));
				this.selectGoods2Visible1 = false;
			},
			listGoods2() {
				axios.get('goods/goods2', {
					params: this.queryGoods2Form
				}).then(resp => {
					this.goods2TableData = resp.list;
					this.queryGoods2Form.pageNum = resp.pageNum;
					this.queryGoods2Form.pageSize = resp.pageSize;
					this.queryGoods2Form.totalNum = resp.total;
				})
			},
			resetQueryGoods2Form() {
				this.queryGoods2Form = {
					gtype: null,
					gname: null,
					gbrand: null,
					gmodel: null,
					gcolor: null,
				}
				this.goods2TableData = [];
			},
			showSelectGoods2Dialog() {
				this.selectGoods2Visible1 = true;
				this.resetQueryGoods2Form();
			},
		},
		mounted() {
			this.getDictItems("phone_color").then(resp => {
				this.colorList = resp.data;
			});
			getDistinctBrand().then(resp => {
				this.brandList = resp.data;
			});
			getGoodsTypeTree().then(resp => {
				this.goodsTypeTree = resp.data;
			});
			this.doQuery();
		},
	};
</script>

<style scoped>
	a {
		color: #409eff;
		font-size: 16px;
	}

	.mytag {
		width: 200px;
		height: 40px;
		font-size: 15px;
	}
</style>
